<template>
  <div class="box">
   
    <!-- 头部 -->
    <div class="heads">
      <router-link class="opens" :to="{path:'/'}"></router-link>
      <!-- 时间 -->
      <div class="item">09：35：26</div>
      <!-- 日期 -->
      <div class="date">
        <p>2018/11/04</p>
        <p>星期一</p>
      </div>
    </div>
    <!-- 内容 -->
    <div class="content_box">
      <router-link class="opens" :to="{path:'/'}"></router-link>
      <!--  内容左部分盒子  -->
      <div class="left_box">
        <!-- 耗能监控 -->
        <div class="left_box_top">
          <!-- EcharsColumnar -->
          <column-chart></column-chart>
          <!-- <echars-column> </echars-column> -->
        </div>
        <!-- 报警情况 -->
        <div class="left_box_center">
          <pie-installed></pie-installed>
        </div>
        <!-- 设备信息 -->
        <div class="left_box_bottom">
          <pie-hollow></pie-hollow>
        </div>
      </div>
      <!--  内容中间部分盒子  -->
      <div class="center_box">
        <ul>
          <li>
            <p>中国光大银行石家庄分行</p>
            <p>裕华支行</p>
          </li>
          <li>
            <p>中国光大银行承德分行</p>
            <p>双桥支行</p>
          </li>
          <li>
            <p>中国光大银行邢台分行</p>
            <p>太行支行</p>
          </li>
          <li>
            <p>中国光大银行廊坊分行</p>
            <p>大清支行</p>
          </li>
          <li>
            <p>中国光大银行邯郸分行</p>
            <p>桥东支行</p>
          </li>
          <li>
            <p>中国光大银行沧州分行</p>
            <p>东光支行</p>
          </li>
          <li>
            <p>中国光大银行唐山分行</p>
            <p>路南支行</p>
          </li>
          <li>
            <p>中国光大银行衡水分行</p>
            <p>深圳支行</p>
          </li>
        </ul>
      </div>
      <!--  内容右部分盒子  -->
      <div class="right_box">
        <div class="right_box_center">
          <div class="item_icon">
            <img src="../../assets/报警图标.svg" alt />
            <span>2019-05-05 14：42：01</span>
          </div>
          <ul class="my_ul">
            <li>
              五五路6号设备DSFAS 被拆
              <img src="../../assets/close.svg" alt />
            </li>
            <li>
              五五路6号设备DSFAS 被拆
              <img src="../../assets/close.svg" alt />
            </li>
            <li>
              五五路6号设备DSFAS 被拆
              <img src="../../assets/close.svg" alt />
            </li>
            <li>
              五五路6号设备DSFAS 被拆
              <img src="../../assets/close.svg" alt />
            </li>
            <li>
              五五路6号设备DSFAS 被拆
              <img src="../../assets/close.svg" alt />
            </li>
            <li>
              五五路6号设备DSFAS 被拆
              <img src="../../assets/close.svg" alt />
            </li>
          </ul>
          <div class="item_icon">
            <img src="../../assets/报警图标.svg" alt />
            <span>2019-05-05 14：42：01</span>
          </div>
          <ul class="my_ul">
            <li>
              五五路6号设备DSFAS 被拆
              <img src="../../assets/close.svg" alt />
            </li>
            <li>
              五五路6号设备DSFAS 被拆
              <img src="../../assets/close.svg" alt />
            </li>
            <li>
              五五路6号设备DSFAS 被拆
              <img src="../../assets/close.svg" alt />
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//  能耗趋势数据表
import ColumnChart from "@/components/Eachars_column";
// 饼状图报警情况
import PieInstalled from "@/components/Eachars_bizha";
// 空心饼图设备信息 
import PieHollow from "@/components/Echars_piehollow";

export default {
  components: {
    //   饼状图
    PieInstalled,
    // 柱状图
    ColumnChart,
    // 空心饼状图
    PieHollow
  }
};
</script>

<style scoped lang="less">
.box {
  width: 1920px;
  height: 1080px;
  background: url(../../assets/背景.png) no-repeat;
  background-size: 1920px 1080px;
  /* 头部 */
  .heads {
    width: 100%;
    height: 100px;
    background: url(../../assets/bz-6.png) no-repeat;
    color: #9cf1fe;
    // 跳转支行
    .opens {
      z-index:9000;
      width: 1920px;
      height: 300px;
      display: block;
      margin: 0 auto; 
      background-color: rgba(405, 550, 117,0);
    }
    // 时间
    .item {
      font-size: 20px;
      font-weight: 700;
      float: right;
      margin-right: 232px;
      margin-top: -290px;
    }
    // 日期
    .date {
      font-size: 10px;
      font-weight: 500;
      float: right;
      margin-right: 100px;
      margin-top: -290px;
      text-align: center;
    }
  }
  /* 内容 */
  .content_box {
    width: 1920px;
    padding: 0 26px;
    box-sizing: border-box;
    position: absolute;
    display: flex;
    /* 内容左部分盒子 */
    .left_box {
      width: 480px;
      height: 945px;
      z-index: 9999;
      .left_box_top {
        width: 480px;
        height: 300px;
        background: url(../../assets/第二屏-能耗监控.png) no-repeat;
      }
      .left_box_center {
        width: 480px;
        height: 300px;
        background: url(../../assets/第二屏-报警统计.png) no-repeat center/
          cover;
        margin: 20px 0;
      }
      .left_box_bottom {
        width: 480px;
        height: 300px;
        background: url(../../assets/第二屏-设备信息.png) no-repeat center/
          cover;
      }
    }
    // 内容中间部分盒子
    .center_box {
      width: 1133px;
      height: 723px;
      position: absolute;
      right: 405px;
      top: 170px;
      background: url(../../assets/地图底座.png) no-repeat center/ cover;
      ul {
        height: 500px;
        li {
          width: 256px;
          height: 92px;
          font-size: 20px;
          color: #8cd1e8;
          background: url(../../assets/支行地址背景.png) no-repeat;
          margin-left: 300px;
          margin-top: 45px;
          padding-top: 22px;
          padding-left: 30px;
        }
      }
      li:nth-child(2) {
        position: relative;
        left: 463px;
        top: -110px;
      }
      li:nth-child(3) {
        position: relative;
        left: -150px;
        top: -200px;
      }
      li:nth-child(4) {
        position: relative;
        right: -250px;
        top: -310px;
      }
      li:nth-child(5) {
        position: relative;
        left: -175px;
        top: -405px;
      }
      li:nth-child(6) {
        position: relative;
        left: 100px;
        top: -510px;
      }
      li:nth-child(7) {
        position: relative;
        left: 410px;
        top: -670px;
      }
      li:nth-child(8) {
        position: relative;
        left: -70px;
        top: -710px;
      }
    }
    /* 内容右部分盒子 */
    .right_box {
      width: 480px;
      height: 945px;
      z-index: 9999;
      right: 40px;
      top: 0px;
      overflow: hidden;
      position: absolute;
      background: url(../../assets/第二屏-报警列表.png) no-repeat center/ cover;
      // 日期
      .item_icon {
        font-size: 16px;
        font-weight: 500;
        color: #9cf1fe;
        position: relative;
        top: 57px;
        left: 34px;
        height: 55px;
        line-height: 55px;
        align-content: center;
        //  警灯
        img {
          width: 43px;
          height: 43px;
          margin-right: 12px;
          vertical-align: middle;
        }
        //  时间
        span {
          margin-top: 10px;
        }
      }
      // 预警信息
      .my_ul {
        position: relative;
        top: 56px;
        left: 34px;
        overflow: hidden;
        li {
          width: 421px;
          height: 55px;
          line-height: 55px;
          margin-top: 12px;
          padding-left: 35px;
          color: #9cf1fe;
          box-sizing: content-box;
          border-top-left-radius: 30px;
          border-bottom-left-radius: 30px;
          background-image: linear-gradient(
            to right,
            rgba(246, 110, 100, 0.5),
            rgba(252, 163, 163, 0)
          );
          // 关闭按钮
          img {
            width: 9.9px;
            height: 10.2px;
            display: inline-block;
            margin-left: 150px;
          }
        }
      }
    }
  }
}
</style>



